<template>
  <div class="loginForm">
    <!-- 表单区域 -->
    <el-form :model="form" :rules="rules" ref="loginForm" class="demo-ruleForm">
      <!-- 用户名 -->
      <el-form-item prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          clearable
          @focus="cleanValid('username')"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          show-password
          @focus="cleanValid('password')"
        ></el-input>
      </el-form-item>
      <!-- 忘记密码 -->
      <el-button type="text" style="float:right">忘记密码</el-button>
      <!-- 登录按钮 -->
      <el-button type="primary" @click="login">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      //定义验证规则 rules定义在data中，它是一个对象
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          //补充正则验证
          { pattern: /^1\d{10}$|^\w{3,}$/, message: '用户名不少于3个字符或11位数字', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          //补充正则验证
          { pattern: /^\w{3,}$/, message: '密码不少于3个数字或字母', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    // 清除验证
    cleanValid(propname) {
      // 传入 prop属性的值，清除指定的验证
      this.$refs.loginForm.clearValidate(propname);
    },
    // 对用户输入进行二次验证，如果通过则可以发起登陆请示，如果不通过则不能发起登陆请示
    // validate方法可以对表单元素的数据根据rules规则进行校验，同时会将校验结果返回到回调函数中，它是表单的方法
    login() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // console.log(valid);  //false true
          // 利用try... catch -- async await 报错处理
          try {
            let res = await this.$axios({
              method: 'post',
              url: '/accounts/login',
              data: this.form
            })
            console.log(res);
            this.$message.success('登录成功')
          } catch (e) {  // 如果出错，会由catch进行捕获，你可以在这个结构中进行处理
            console.log(e);
            this.$message.warning('登录失败，请重新输入')
          } finally {
            // 无论如何都会执行的代码块
          }
          //发送登录请求，并跳转首页
          // this.$axios({
          //   method: 'post',
          //   url: '/accounts/login',
          //   data: this.form
          // })
          //   .then(res => {
          //     console.log(res);
          //     this.$message.success('登录成功')
          //   })
          //   .catch(err => {
          //     console.log(err);
          //     this.$message.warning('登录失败，请重新输入')
          //   })
        } else {
          this.$message.warning('登录失败，请检查输入是否正确')
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.loginForm {
  padding: 30px;
}
// 重置按钮样式
.el-button + .el-button {
  width: 100%;
  margin-left: 0;
}
</style>